<template>
	<view class="root">
		<view class="form">
			<!-- 地址 -->
			<view class="address">
				<view class="text">地址</view>
				<view class="data">奥克斯广场</view>
				<view class="select-location-icon">
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<!-- 门牌号 -->
			<view class="door-number">
				<view class="text">门牌号</view>
				<input type="text" class="value" placeholder="输入详细地址与门牌号"/>
			</view>
			<!-- 楼层 -->
			<view class="floor">
				<view class="text">楼层</view>
				<input type="text" class="value" placeholder="输入详细楼层"/>
			</view>
			<!-- 联系人 -->
			<view class="contacts">
				<view class="text">联系人</view>
				<input type="text" class="value" placeholder="输入联系人姓名"/>
			</view>
			<!-- 电话 -->
			<view class="telephone">
				<view class="text">电话</view>
				<input type="text" class="value" placeholder="输入联系电话"/>
			</view>
			
			<view class="submit-container">
				<button type="button">保存并使用</button>
			</view>
	</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>

	.root {
		border: 1px solid #efeff5;
		box-shadow: 0 0 2rpx black;
		border-radius: 30rpx;
		.form {
			padding-left: 30rpx;
			//	整体调控表单项
			&>view {
				margin-top: 20rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				input {
					padding-left: 30rpx;
					
				}
				.text {
					width: 120rpx;
				}
			}
			.address {
				display: grid;
				grid-template-columns: 120rpx 1fr 50rpx;
				.text {
					
				}
				.data {
					padding-left: 30rpx;
				}
			}
			.submit-container {
				margin: 20rpx auto 30rpx auto;
				
				width: 80%;
				button {
					background-color: #2ec076;
					color: white;
					font-weight: 700;
					width: 100%;
				}
			}
			
		}
	}
	
	
</style>